<template>
<div>
      <!-- 父组件中点击编辑打开弹出层 -->
    <!-- 子组件中, 点击x关闭弹出层 -->
  <button @click="isShow =true">编辑</button>
  <HmPopup v-model="isShow">
    <h1>123</h1>
  </HmPopup>
</div>
    

</template>

<script>
import HmPopup from './components/HmPopup.vue'


export default {
  // 0. 注册组件
  // 1. 定义一个布尔值, 用来控制弹出层的显示和隐藏
  // 2. v-model=""  :value  @input绑定布尔值
  // 3. 子组件通过props接收value 收到布尔值
  // 4. 子组件使用value控制v-if显示和隐藏
  // 5. 子组件通过$emit触发一个input事件, 传出来一个false
    data() {
    return {
      isShow:false
    
    }
  },
  components: { HmPopup },
}
</script>

<style>

</style>
